<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0; // 清除默认边距
  background-color: #161622;
}

ul,
ol {
  list-style: none;
}

#app {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
}
</style>
<template>
  <div class="container">
    <router-view></router-view>
    <TabBar v-if="shouldShowTabBar"></TabBar>
    <LoginModal></LoginModal>
    <RegisterModal></RegisterModal>
    <ForgotPasswordModal></ForgotPasswordModal>
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router';
import TabBar from './components/common/TabBar.vue';
import LoginModal from './components/login/LoginModal.vue';
import RegisterModal from './components/login/RegisterModal.vue';
import ForgotPasswordModal from './components/login/ForgotPasswordModal.vue';
import { useUserStore } from '@/store/modules/user/user.js'
import { useMessageStore } from '@/store/modules/message/message.js'
import { inject } from 'vue'

const socket = inject('socket')
const messageStore = useMessageStore()
const userStore = useUserStore()
// // 获取当前路由
const route = useRoute();

const excludePaths = [
  '/video',
  '/user/fans',
  '/user/follows',
  '/message/followers',
  '/message/likes',
  '/message/mentions',
  '/message/comments',
  '/search',
  '/contact-picker',
  'ChatWith',
];

// 2. 计算属性：判断当前路径是否需要显示TabBar
const shouldShowTabBar = computed(() => {
  // 当前路径是否不在排除列表中（即需要显示TabBar）
  return !excludePaths.some(path => route.path.includes(path));
});
watch(
  () => userStore.isLogin,
  (isLogin) => {
    if (isLogin && userStore.userInfo?.userId) {
      if (socket.connected) {
        // 已连接：直接发送登录
        socket.emit('login', userStore.userInfo.userId);
        socket.on('receivePrivateLetter', (msg) => {
          messageStore.addChatMessage('收到私信', msg)
        })
      } else {
        // 未连接：监听connect事件后再发送登录
        socket.connect();
        socket.once('connect', () => { // once确保只执行一次
          socket.emit('login', userStore.userInfo.userId);
        });
      }
    }
  },
  { immediate: true }
)
onMounted(() => {
  // // 监听服务器发送的评论、点赞、关注、私信消息
  // socket.on('receiveComment', (msg) => {
  //   messageStore.addChatMessage('收到评论（含回复）', msg)
  // })
  // // 监听服务器发送的点赞、关注、私信消息
  // socket.on('receiveTriggerLike', (msg) => {
  //   messageStore.addChatMessage('收到点赞', msg)
  // })
  // // 监听服务器发送的关注消息
  // socket.on('receiveTriggerFollow', (msg) => {
  //   messageStore.addChatMessage('收到关注', msg)
  // })
  // 监听服务器发送的私信消息
  socket.on('receivePrivateLetter', (msg) => {
    messageStore.addChatMessage('收到私信', msg)
  })
})
// 3. 组件卸载时，移除所有事件监听
onUnmounted(() => {
  socket.off('receiveComment')
  socket.off('receiveTriggerLike')
  socket.off('receiveTriggerFollow')
  socket.off('receivePrivateLetter')
})
</script>